//获取到所需要的元素
var web = document.querySelector(".web");
var webImg = web.querySelector(".img");
var timer = web.querySelector("#timeSecond");
var scorePoint =web.querySelector("#score");
var score = 0,grade;
//随机添加20张图片
function creatimg() {
	for(var x = 0; x < 20; x++) {
		var imgArr = ["img/img1.jpg", "img/img2.jpg", "img/img3.jpg", "img/img4.jpg"];
		var num = Math.floor(Math.random(0, 1) * imgArr.length); //生成随机数为数组的下标
		var srcOfImg = imgArr[num];
		var imge = document.createElement("img"); //创建img元素
		imge.setAttribute("src", srcOfImg); //设置图片路径，为数组中的元素
		webImg.appendChild(imge); //将图片添加到webImg中

	}
	// console.log(imgArr[num]);查看随机生成的img路径

}
creatimg();

//给图片添加点击事件，判断路径相同则改变样式，否则 不改变
//点击每一张图片都会发生点击事件
function clickele() {
	var img = document.querySelectorAll("img"); //获取到生成的img元素 
	console.log(img);
	var imgSrc, imgSrc1, i, j;
	
	var index;
	for(var i = 0; i < img.length; i++) {
		img[i].index = i; //将i的值赋给元素的下标，不然每次都是处于循环的结束值i=img.length,导致后面无法获取到元素

		//	var isClick = true;
		//	添加监听事件,点击触发，获取图片路径
		var firClick = img[i].addEventListener("click", function(e) {
			var that = this;
			var imgSrc = e.target.src;
			this.setAttribute("clickMe", "yes");
			firClick = null;
			for(var j = 0; j < img.length; j++) {
				img[j].index = j;
				//第二次点击是触发，获取图片路径
				var secClick = img[j].addEventListener("click", function(e) {
					var imgSrc1 = e.target.src;
					var that2 = this;
					//				 	console.log(imgSrc1)
					//判断图片路径是否相同
					if(imgSrc == imgSrc1 && that.index != this.index) {
						if(img[that.index].style.opacity != "0" && img[this.index].style.opacity != "0") {
							//&&img[this.index+4].style.opacity!= "0" &&img[this.index-4].style.opacity!= "0" && img[this.index-1].style.opacity!= "0"
							//
							if(img[that.index].getAttribute("clickMe") == img[this.index].getAttribute("clickMe")) {

								img[that.index].style.opacity = "0";
								img[this.index].style.opacity = "0";
								score++;
//								checkCookie();
								//将score 的值写到span元素中
								scorePoint.innerText = score;
								clearEle();
							}

						}

					} else {
						img[that.index].setAttribute("clickMe", "");
						img[this.index].setAttribute("clickMe", "yes");
					}

				})
			}
		})

	}
}
clickele();


//获取到重置按钮
function resetImg() {
	var img = document.querySelectorAll("img");
	var reset = web.querySelector("button");
	//样式为改变的的图片
	reset.addEventListener("click", function() {
		var diffrenceSrc = []
		for(var i= 0; i < img.length; i++) {
			if(img[i].style.opacity != "0") {
				diffrenceSrc.push(img[i].src);
				if(diffrenceSrc.length <= 2) {
					img[i].setAttribute("src", diffrenceSrc[0]);
				}
			}
		}
	})
}
resetImg();

//将所有图片的的opacity都变为0，之后，清除所有的img
function clearEle(){
	var img = document.querySelectorAll("img");
		if(score%10==0){
			webImg.innerHTML="";//清空图片
			creatimg();
			clickele();
			resetImg();
		}
}
//添加定时器
		var timeSecond =60;
		var time = setInterval(function(){
			timeSecond--;
			timer.innerText =timeSecond;
			
			if(timeSecond==0){
				clearInterval(time);
				window.location.href="gameover.html?grade="+score;
			}
			 
		},1000)




